<template>
	<view class="user">
		<view class="star"></view>
		<view class="star2"></view>
		<view class="star3"></view>
		<view class="head">
			<view class="img" v-if="log.account!=''">
				<image class="image" src="../../static/img/userface/20.jpg"></image>
				<view class="username">{{log.account}}</view>
			</view>
			<navigator open-type="navigate" url="/pages/login/login">
				<view class="login" v-if="log.account==''">
					<view class="log">
						登录/注册
					</view>
				</view>
			</navigator>
		</view>
		<view class="set" @click="goSet()">
			<image class="image" src="../../static/set.png"></image>
		</view>
		<view class="order">
			<view class="ord" @click="goOrder(0)">
				<view class="img">
					<image class="image" src="../../static/img/user/icon-order.png"></image>
					<text>全部订单</text>
				</view>
				<view class="arrowhead">
					<image class="image" src="../../static/rigth.png"></image>
				</view>
			</view>
			<view class="fun">
				<view class="v1" @click="goOrder(1)">
					<u-icon size="36" name="rmb-circle"></u-icon>
					<view>待付款</view>
				</view>
				<view class="v1" @click="goOrder(2)">
					<u-icon size="36" name="gift"></u-icon>
					<view>待发货</view>
				</view>
				<view class="v1" @click="goOrder(3)">
					<u-icon size="36" name="car"></u-icon>
					<view>待收货</view>
				</view>
				<view class="v1" @click="goOrder(4)">
					<u-icon size="36" name="chat"></u-icon>
					<view>待评价</view>
				</view>
				<view class="v1" @click="goOrder(0)">
					<u-icon size="36" name="grid"></u-icon>
					<view>全部</view>
				</view>
			</view>
		</view>
		<view class="kefu">
			<view class="fun2" @click="goAddrList()">
				<view class="v2">
					<image class="image" src="../../static/img/user/icon-address.png"></image>
					<text>收货地址</text>
				</view>
				<view class="arrowhead">
					<image class="image" src="../../static/rigth.png"></image>
				</view>
			</view>
			<view class="fun2">
				<view class="v2">
					<image class="image" src="../../static/img/user/icon-kefu.png"></image>
					<text>客服中心</text>
				</view>
				<view class="arrowhead">
					<image class="image" src="../../static/rigth.png"></image>
				</view>
			</view>
			<view class="fun2">
				<view class="v2">
					<image class="image" src="../../static/img/user/icon-collect.png"></image>
					<text>我的收藏</text>
				</view>
				<view class="arrowhead">
					<image class="image" src="../../static/rigth.png"></image>
				</view>
			</view>
			<view class="fun2">
				<view class="v2">
					<image class="image" src="../../static/img/user/icon-about.png"></image>
					<text>帮助中心</text>
				</view>
				<view class="arrowhead">
					<image class="image" src="../../static/rigth.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions,mapState } from 'vuex';
	export default {
		data() {
			return {
				user : {}
			}
		},
		computed:{
			...mapState('login',['users','log'])
		},
		methods: {
			// 前往设置中心
			goSet(){
				uni.navigateTo({
					url:'/pages/manage/manage'
				})
			},
			// 前往订单
			goOrder(index){
				if(this.log.account==''){
					setTimeout(()=>{
						uni.showToast({
							icon:'none',
							title:'请先登录！'
						})
					},200)
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}else{
					uni.navigateTo({
						url:'/pages/order/order?index=' + index
					})
				}
			},
			// 前往收货地址
			goAddrList(){
				if(this.log.account==''){
					setTimeout(()=>{
						uni.showToast({
							icon:'none',
							title:'请先登录！'
						})
					},200)
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}else{
					uni.navigateTo({
						url:'/pages/addrlist/addrlist'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.user{
	width: 100%;
	background-color: #ebebeb;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	.star{
		display: block;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #fff;
		position: relative;
		top: 10px;
		left: 180px;
		box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
		animation: star-ani 3s linear infinite;
		@keyframes star-ani {
			0% {
				opacity: 0;
				transform: scale(0) rotate(0) translate3d(0,0,0);
			}
			50% {
				opacity: 1;
				transform: scale(1) rotate(0) translate3d(-100px,100px,0);
			}
			100% {
				opacity: 0;
				transform: scale(1) rotate(0) translate3d(-300px,300px,0);
			}
		}
	}
	.star:after{
		content: '';
		display: block;
		top: 0px;
		left: 4px;
		border: 0px solid #fff;
		border-width: 2px 90px 2px 90px;
		border-color: transparent transparent transparent rgba(255, 255, 255, .3);
		transform: rotate(-45deg) translate3d(1px , 3px , 0);
		transform-origin: 0% 0%;
	}
	.star2{
		display: block;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #fff;
		position: relative;
		top: 20px;
		left: 320px;
		box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
		animation: star-ani 4s linear infinite;
	}
	.star3{
		display: block;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #fff;
		position: relative;
		top: 10px;
		left: 460px;
		box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
		animation: star-ani 6s linear infinite;
	}
	.head{
		width: 100%;
		height: 180px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ebebeb;
		.img{
			width: 80px;
			height: 80px;
			text-align: center;
			.image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
				// animation: klf 1.5s linear infinite;
				// @keyframes klf{
				// 	0% { border: 2px solid red; }
				// 	25% { border: 2px solid blue; }
				// 	50% { border: 2px solid green; }
				// 	75% { border: 2px solid yellow; }
				// 	100% { border: 2px solid red; }
				// }
			}
			.username{
				font-size: 16px;
				color: #ababab;
			}
		}
		.login{
			text-align: center;
			font-size: 20px;
			font-weight: bold;
			color: #434343;
		}
	}
	.set{
		width: 25px;
		height: 25px;
		position: relative;
		bottom: 170px;
		left: 20px;
		.image{
			width: 100%;
			height: 100%;
		}
	}
	.order{
		width: 96%;
		margin: 0 auto;
		border-radius: 10px;
		background-color: white;
		.ord{
			width: 100%;
			padding: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f3f3f3;
			.img{
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.image{
					width: 28px;
					height: 28px;
				}
			}
			.arrowhead{
				width: 22px;
				height: 22px;
				margin-right: 25px;
				.image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.fun{
			display: flex;
			align-items: center;
			justify-content: space-around;
			.v1{
				padding: 15px;
				text-align: center;
				font-size: 12px;
			}
		}
	}
	.kefu{
		width: 96%;
		margin: 10px auto;
		background-color: white;
		border-radius: 10px;
		.fun2{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #f3f3f3;
			.v2{
				width: 32%;
				padding: 10px;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.image{
					width: 28px;
					height: 28px;
				}
			}
			.arrowhead{
				width: 22px;
				height: 22px;
				margin-right: 10px;
				.image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
